<template>
  <div id="detail">
    <div class="doc" @click="handleback">◀</div>
    <van-swipe :autoplay="2000" indicator-color="#FF448F">
      <van-swipe-item
        v-for="(item, index) in detlist.slider_image"
        :key="index"
      >
        <img v-lazy="item" />
      </van-swipe-item>
    </van-swipe>
    <div class="wrapper">
      <div class="wrapper-price">
        <p><i>¥</i>{{ detlist.price }}<i>起</i></p>
      </div>
      <div class="wrapper-title">
        <p>{{ detlist.store_name }}</p>
      </div>
      <div class="wrapper-stock">
        <ul>
          <li>
            原价：<i>{{ "¥" + detlist.ot_price }}</i>
          </li>
          <li>库存：{{ detlist.stock + detlist.unit_name }}<i></i></li>
          <li>销量：{{ detlist.ficti }}</li>
        </ul>
      </div>
    </div>
    <div class="choice">
      <div class="choice-content">
        <van-cell is-link
          >已选择：<i>{{ choicelist2.suk }}</i></van-cell
        >
      </div>
    </div>
    <div class="recommend">
      <div class="recommend-title">优品推荐</div>
      <div class="recommend-content">
        <div v-for="(itm, i) in comlist" :key="i" @click="handledetail(itm.id)">
          <div class="recommend-content-box">
            <img :src="itm.image" alt="" />
          </div>
          <div class="recommend-section">
            <div>{{ itm.store_name }}</div>
            <p>{{ "¥" + itm.price }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="introduce">
      <div class="introduce-title">产品介绍</div>
      <div v-html="detlist.description"></div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="home-o" text="首页" to="/" />
      <van-goods-action-icon icon="star" text="收藏" color="red" />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :badge="allinfo.allNum"
        to="/cart"
      />
      <van-goods-action-button
        @click="handlecart"
        type="warning"
        text="加入购物车"
      />
      <van-goods-action-button type="danger" text="立即购买" to="/" />
    </van-goods-action>
  </div>
</template>

<script>
import Vue from "vue";
import { Lazyload } from "vant";
Vue.use(Lazyload);
import { getdetail } from "../api/Detail";
export default {
  data() {
    return {
      detlist: 0,
      choicelist: [],
      choicelist2: [],
      comlist: [],
      idx: 0,
      ID:0,
    };
  },
  created() {
    let { id } = this.$route.params;
    this.idx = id;
    getdetail(id).then((res) => {
      this.comlist = res.data.data.good_list;
      this.detlist = res.data.data.storeInfo;
      let obj = res.data.data.productValue;
      for (let i in obj) {
        this.choicelist.push(obj[i]);
      }
      this.choicelist2 = this.choicelist[0];
    });
  },
  computed: {
    shoplist() {
      return this.$store.state.cart.shoplist;
    },
    allinfo() {
      let { shoplist } = this;
      let allNum = 0;
      for (let i = 0; i < shoplist.length; i++) {
        allNum += this.shoplist[i].spec_type;
      }
      return { allNum };
    },
  },
  methods: {
    handledetail(id){
      this.$router.push(`/detail/${id}`);
    },
    handleback(){
      this.$router.go(-1)
    },
    handlecart() {
      let { detlist } = this;
      this.$store.commit("cart/getcart", detlist);
    },
  },
};
</script>

<style lang="less" scoped>
#detail {
  background: #f5f5f5;
}
img {
  width: 100%;
  height: 375px;
}
.doc{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999;
}
.wrapper {
  width: 100%;
  background: #fff;
  .wrapper-price {
    margin: 0 15px;
    padding-top: 12px;
    p {
      font-size: 24px;
      font-weight: 700;
      color: #ff448f;
      i {
        font-size: 14px;
      }
    }
  }
  .wrapper-title {
    margin: 11px 15px 0 15px;
    p {
      font-size: 16px;
      font-weight: 700;
      color: #282828;
    }
  }
  .wrapper-stock {
    margin: 11px 15px 0 15px;
    padding-bottom: 10px;
    height: 16px;
    font-size: 12px;
    color: #82848f;
    ul {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
.choice {
  width: 100%;
  height: 60px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  .choice-content {
    width: 100%;
    background-color: #fff;
    font-size: 13px;
    color: #82848f;
    margin: 10px 0;
    height: 40px;
    display: flex;
    align-items: center;
    display: flex;
    justify-content: space-between;
    i {
      font-size: 14px;
      color: #282828;
    }
  }
}
.recommend {
  background: #fff;
}
.recommend-title {
  text-align: center;
  line-height: 49px;
  font-size: 15px;
  color: #ff448f;
}
.recommend-content {
  font-size: 13px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 15px;
  .recommend-content-box {
    width: 107px;
    border-radius: 10px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .recommend-section {
    width: 107px;
    div {
      color: #282828;
      margin-top: 6px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    p {
      color: #ff448f;
    }
  }
}
.introduce {
  margin-top: 10px;
}
.introduce-title {
  text-align: center;
  line-height: 49px;
  font-size: 15px;
  color: #ff448f;
  background: #fff;
}
.van-goods-action {
  z-index: 999;
}
</style>